<template>
  <div class="query-Info-con">
    <div class="btn_select">
      <div class="item-btn" :class="{ active: btn.active }" v-for="(btn, index) in selectInfoBtns" :key="index"
        @click="btnClick(btn, index)">
        <img :src="btn.active ? btn.image_active : btn.image" alt=""
          :class="btn.active ? 'item-btn-active' : 'item-btn-unactive'" />
        <!-- <img v-show="btn.active" :src="btn.image_active" alt="" :class="btn.active ? '' : ''"/> -->
        <!-- <img v-show="!btn.active" :src="btn.image" alt="" :class="btn.active ? '' : ''"/> -->
        <p>{{ btn.name }}</p>
      </div>
    </div>
    <div class="select_container">
      <QueryJKD v-show="selectInfoBtns[0].active" />
      <queryPipeline v-show="selectInfoBtns[1].active" />
      <QuerySpatial v-show="selectInfoBtns[2].active" />
    </div>
  </div>
</template>

<script>
  import Bus from "@/js/EventBus";
  import QueryJKD from '@/components/MainPopup/QueryInfo/QueryJKD.vue'
  import queryPipeline from '@/components/MainPopup/QueryInfo/QueryPipeline.vue'
  import QuerySpatial from '@/components/MainPopup/QueryInfo/QuerySpatial.vue'

  export default {
    name: 'QueryInfo',
    components: {
      QueryJKD,
      queryPipeline,
      QuerySpatial,
    },
    data () {
      return {
        selectInfoBtns: [
          {
            name: "监测点查询",
            image: require("@/assets/rightMenu/selectInfo/button_info.png"),
            image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
            active: true,
            title: "监测点查询",
          },
          {
            name: "管线查询",
            image: require("@/assets/rightMenu/selectInfo/button_info.png"),
            image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
            active: false,
            title: "管线查询",
          },
          {
            name: "空间查询",
            image: require("@/assets/rightMenu/selectInfo/button_info.png"),
            image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
            active: false,
            title: "空间查询",
          },
        ],
      };
    },

    methods: {
      btnClick (btn, index) {
        Bus.$emit("initlineandpoint", true);
        this.selectInfoBtns.map((item) => {
          item.active = false;
        });
        btn.active = true;
      },
    },
  };
</script>

<style scoped>
.query-Info-con {
  /* width: 300px;
height: 742px;
position: absolute;
right: 259px;
top: 106px; */
  /* background: chocolate; */
  height: calc(100vh - 220px);
}

.btn_select {
  display: flex;
}

.item-btn {
  width: 90px;
  height: 30px;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  top: 3px;
  cursor: pointer;
}

/* .item-btn img {
width: 120%;
height: 100;
} */
.item-btn p {
  font-family: SourceHanSansCN-Regular;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(10%, -50%);
}

.item-btn.active {
  color: #fff;
  z-index: 999;
}

.item-btn-active {
  width: 130%;
  height: 100%;
  z-index: 999;
}

.item-btn-unactive {
  width: 120%;
  height: 100%;
  z-index: 998;
}

.select_container {
  width: 301px;
  height: calc(100vh - 249px);
  background: url('@/assets/rightMenu/selectInfo/selectInfo_bg.png');
  background-size: 100% 100%;
}
</style>